<template lang="pug">
  div.table-empty
    s-table(
      ref="table"
      v-loading="loading"
      reqUrl="/api/checker/getStaffCardList"
      :column="classesColumn"
      :filterProps="{fields: searchConfig}"
      :queryPropsParams="{areaId: curArea.areaId}"
    )
      template(slot="action" slot-scope="text, scope")
        template
          el-link(slot="reference" v-if="!scope.cardNo" type="primary" @click="actionHandle(scope, 'bind')") 发卡
          el-popconfirm(
            v-if="scope.cardNo"
            title="确定要给此学生进行销卡?"
            @confirm="() => actionHandle(scope, 'unbind')"
            @onConfirm="() => actionHandle(scope, 'unbind')"
          )
            el-link(slot="reference" type="danger") 销卡
</template>
<script>
import { unbind, bind } from '../api.js'
import { mapGetters } from 'vuex'
import { column } from './config'
import { getClassesByArea } from '@/api/common'
import { statusList } from '@/views/basicData/hardWare/tabs/iccard/config'
export default {
  components: {
  },
  data () {
    return {
      classesColumn: column,

      classes: [],
      classId: '',

      loading: false,

      statusList: statusList
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
        {
          key: 'realName',
          label: '教保师姓名'
        },
        {
          key: 'status',
          label: '状态',
          type: 'select',
          fieldProps: {
            options: this.statusList,
            props: { value: 'id', label: 'name' }
          }
        }
      ]
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },

    // 获取托班班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
      this.classId = this.classes[0]?.id || ''
    },

    actionHandle (row, type = 'unbind') {
      console.log(type)
      if (type === 'bind') {
        this.bindCard('', row)
      }
      if (type === 'unbind') {
        unbind({ cardNo: row.cardNo }).then(res => {
          this.refreshTable()
        })
      }
    },

    bindCard (inputValue, row) {
      this.$prompt('请输入卡号', '绑卡', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: inputValue
      }).then(({ value }) => {
        if (value) {
          bind({ areaId: this.curArea.areaId, cardNo: value, type: 2, userId: row.id }).then(res => {
            console.log(res)
            this.$message.success('提交成功')
            this.refreshTable()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.video{
  width: 100%;
  height: 560px
}
.close{
  margin-top: 20px;
}
</style>
